<template>
  <div>
    <van-nav-bar
      fixed
      @click-left="onClickLeft"
      left-arrow
      left-text="返回"
      title="景点地图"
    ></van-nav-bar>
    <div class="mianban">
      <div class="one">
        <div>{{ data.title }}</div>
        <div>
          <div>{{ data.comment }}条评论</div>
          <div>￥{{ data.price }}元起</div>
        </div>
      </div>

      <div class="two">{{ data.location }}</div>

      <div>
        <div @click="tieshi">交通小贴士</div>
        <div>
          <a style="color: #36d" href="https://uri.amap.com/navigation"
            ><van-icon name="guide-o" />导航
          </a>
        </div>
      </div>
    </div>

    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  data() {
    return {
      details: "",
      data: {},
      location: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    tieshi() {
    },
  },
  mounted() {
    // 地图定位
    window.scrollTo(0, 0);
    // let url = window.location.href;
    // let did = url.split("=")[1];
    // console.log(did);
    // this.axios.get(`/details?did=${did}`).then((res) => {
    //   // console.log(res);
    //   this.data = res.data.results;
    //   this.location = res.data.results.location;
      AMapLoader.load({
        key: "428c19ed61d0e62251ae37cfebf992cc", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geocoder", "AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          let map = new AMap.Map("container");
          // 获得 地理位置信息
          let location = this.location;
          // console.log(location);
          AMap.plugin("AMap.Geolocation", function () {
            // AMap.Geolocation插件加载完毕后，执行该回调方法
            let geoloc = new AMap.Geolocation({
              enableHighAccuracy: true, // 是否使用高精度定位，默认：true
              timeout: 5000, // 设置定位超时时间，默认：无穷大
              zoomToAccuracy: true,
              offset: [10, 20],
              position: "RB",
            });
            AMap.plugin("AMap.Geocoder", function () {
              let geocoder = new AMap.Geocoder({
                city: "",
              });
              geocoder.getLocation(location, function (status, result) {
                // console.log(result);
                let lng = result.geocodes[0].location.lng;
                let lat = result.geocodes[0].location.lat;
                // console.log(lng);
                // console.log(lat);
                showMap(lng, lat);
              });
            });
          });
          function showMap(lng, lat) {
            var map = new AMap.Map("container", {
              zoom: 13, //级别
              center: [185.124, 30.222812], //中心点坐标
              viewMode: "3D", //使用3D视图
            });
            let marker = new AMap.Marker({
              position: [lng, lat], // 基点位置
              offset: new AMap.Pixel(-17, -42), // 相对于基点的偏移位置
            });
            map.add(marker);
          }
        })
        .catch((e) => {
          // console.log(e);
        });
    // });
  },
 
};
</script>

<style lang="scss" scoped>
#container {
  height: 100vh;
}
.mianban {
  box-sizing: border-box;
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 7vw;
  left: 7vw;
  border-radius: 4px;
  height: 27vh;
  background-color: #fff;
  padding: 10px 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  > .one {
    > div:nth-child(1) {
      font-family: "微软雅黑";
      font-weight: bold;
      font-size: 1.2rem;
      margin-bottom: 10px;
      color: rgb(25, 137, 250);
    }

    > div:nth-child(2) {
      display: flex;
      justify-content: center;

      > div {
        margin: 5px;
      }

      > div:nth-child(1) {
        font-size: 0.9rem;
      }

      > div:nth-child(2) {
        color: orange;
        font-size: 1.1rem;
      }
    }
  }

  > div:last-child {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
    > div {
      padding-top: 10px;
      font-size: 15px;
    }
  }
}
</style>
